<template>
  <div class="quanback">

    <!--护理相关-->
    <div class="box">
      <div class="ti">护理相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="diedao">
              <div>
                <img src="./sucai/diedao.png" style="height: 80px;width: 80px">
              </div>
              <div>
                跌倒事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="zhuichuang">
              <div>
                <img src="./sucai/zhuichuang.png" style="height: 80px;width: 80px">
              </div>
              <div>
                坠床事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yachuang">
              <div>
                <img src="./sucai/yachuang.png" style="height: 80px;width: 80px">
              </div>
              <div>
                压疮事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="guanluhuatuo">
              <div>
                <img src="./sucai/guanluhuatuo.png" style="height: 80px;width: 80px">
              </div>
              <div>
                管路滑脱事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="geiyaochacuo">
              <div>
                <img src="./sucai/geiyaochacuo.png" style="height: 80px;width: 80px">
              </div>
              <div>
                给药差错事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="tangshang">
              <div>
                <img src="./sucai/shaoshang.png" style="height: 80px;width: 80px">
              </div>
              <div>
                烧伤/烫伤事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="shuye">
              <div>
                <img src="./sucai/shuye.png" style="height: 80px;width: 80px">
              </div>
              <div>
                输液反应事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="zisha">
              <div>
                <img src="./sucai/zisha.png" style="height: 80px;width: 80px">
              </div>
              <div>
                病人自杀事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">

          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="zoushi">
              <div>
                <img src="./sucai/zoushi.png" style="height: 80px;width: 80px">
              </div>
              <div>
                病人走失事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="xiaodugongying">
              <div>
                <img src="./sucai/xiaodu.png" style="height: 80px;width: 80px">
              </div>
              <div>
                消毒供应事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="qita">
              <div>
                <img src="./sucai/qita.png" style="height: 80px;width: 80px">
              </div>
              <div>
                其他事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--医疗相关-->
    <div class="box">
      <div class="ti">医疗相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="shoushu">
              <div>
                <img src="./sucai/shoushu.png" style="height: 80px;width: 80px">
              </div>
              <div>
                手术事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="mazui">
              <div>
                <img src="./sucai/mazui.png" style="height: 80px;width: 80px">
              </div>
              <div>
                麻醉事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="zhenliao">
              <div>
                <img src="./sucai/zhenliao.png" style="height: 80px;width: 80px">
              </div>
              <div>
                诊疗相关事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yifenyide">
              <div>
                <img src="./sucai/yideyifeng.png" style="height: 80px;width: 80px">
              </div>
              <div>
                医德医风相关
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="binganguanli">
              <div>
                <img src="./sucai/bingan.png" style="height: 80px;width: 80px">
              </div>
              <div>
                病案管理相关
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yuannneibuyu">
              <div>
                <img src="./sucai/xintiaotingzhi.png" style="height: 80px;width: 80px">
              </div>
              <div>
                院内不预期心跳停止事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="geiyaocuowu">
              <div>
                <img src="./sucai/geiyaocuowu.png" style="height: 80px;width: 80px">
              </div>
              <div>
                给药错误
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="jinsiyao">
              <div>
                <img src="./sucai/jinsigeiyao.png" style="height: 80px;width: 80px">
              </div>
              <div>
                近似给药错误
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yizhuchufang">
              <div>
                <img src="./sucai/yizhuchufang.png" style="height: 80px;width: 80px">
              </div>
              <div>
                医嘱或处方错误
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--药物相关-->
    <div class="box">
      <div class="ti">药物相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yaowucunchu">
              <div>
                <img src="./sucai/yaowuchucun.png" style="height: 80px;width: 80px">
              </div>
              <div>
                药物储存相关
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="buliang">
              <div>
                <img src="./sucai/yaowubuliang.png" style="height: 80px;width: 80px">
              </div>
              <div>
                药物不良反应
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--设备相关-->
    <div class="box">
      <div class="ti">设备相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="qicai">
              <div>
                <img src="./sucai/yiliaoqixie.png" style="height: 80px;width: 80px">
              </div>
              <div>
                医疗器械报告
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--院感相关-->
    <div class="box">
      <div class="ti">院感相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="ganranjuji">
              <div>
                <img src="./sucai/ganran.png" style="height: 80px;width: 80px">
              </div>
              <div>
                感染聚集
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="zhiyebaolu">
              <div>
                <img src="./sucai/zhiyebaolu.png" style="height: 80px;width: 80px">
              </div>
              <div>
                职业暴露
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yiliaofeiwu">
              <div>
                <img src="./sucai/yiliaofeiwu.png" style="height: 80px;width: 80px">
              </div>
              <div>
                医疗废物泄露
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--输血相关-->
    <div class="box">
      <div class="ti">输血相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="yongxueanquan">
              <div>
                <img src="./sucai/yongxueanquan.png" style="height: 80px;width: 80px">
              </div>
              <div>
                用血安全
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="shuxuebuliang">
              <div>
                <img src="./sucai/shuxuebuliang.png" style="height: 80px;width: 80px">
              </div>
              <div>
                输血不良
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--医技相关-->
    <div class="box">
      <div class="ti">医技相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="jiancha">
              <div>
                <img src="./sucai/jiancha.png" style="height: 80px;width: 80px">
              </div>
              <div>
                检查事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="jianyan">
              <div>
                <img src="./sucai/jianyan.png" style="height: 80px;width: 80px">
              </div>
              <div>
                检验事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="bingli">
              <div>
                <img src="./sucai/bingliqiepian.png" style="height: 80px;width: 80px">
              </div>
              <div>
                病理切片事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--安保后勤-->
    <div class="box">
      <div class="ti">安保后勤</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="gonggongyiwai">
              <div>
                <img src="./sucai/gonggongyiwai.png" style="height: 80px;width: 80px">
              </div>
              <div>
                公共意外事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="zhianshanghai">
              <div>
                <img src="./sucai/zhian.png" style="height: 80px;width: 80px">
              </div>
              <div>
              治安伤害事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="houqin">
              <div>
                <img src="./sucai/houqin.png" style="height: 80px;width: 80px">
              </div>
              <div>
                后勤相关事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--信息相关-->
    <div class="box">
      <div class="ti">信息相关</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="xinxi">
              <div>
                <img src="./sucai/xinxixiangguan.png" style="height: 80px;width: 80px">
              </div>
              <div>
                信息相关事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

    <!--其他-->
    <div class="box">
      <div class="ti">其他</div>
      <div class="nei">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="feiyong">
              <div>
                <img src="./sucai/feiyong.png" style="height: 80px;width: 80px">
              </div>
              <div>
                费用事件
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="shijiancard" @click.native.prevent="chuangkou">
              <div>
                <img src="./sucai/chuangkou.png" style="height: 80px;width: 80px">
              </div>
              <div>
                窗口服务事件
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>

  </div>


</template>

<script>
  export default {
    methods: {
      diedao() {
        this.$router.push({path: "/hosipitalevent/diedao"});
      },
      zhuichuang() {
        this.$router.push({path: "/hosipitalevent/zhuichuang"});
      },
      qicai() {
        this.$router.push({path: "/hosipitalevent/qicai"});
      },
      yachuang() {
        this.$router.push({path: "/hosipitalevent/yachuang"});
      },
      guanluhuatuo() {
        this.$router.push({path: "/hosipitalevent/guanlu"});
      },
      buliang() {
        this.$router.push({path: "/badmedinflact"});
      },
      geiyaochacuo() {
        this.$router.push({path: "/chacuo"});
      },
      tangshang() {
        this.$router.push({path: "/shaoshang"});
      },
      shuye() {
        this.$router.push({path: "/shuye"});
      },
      zisha() {
        this.$router.push({path: "/zisha"});
      },
      zoushi() {
        this.$router.push({path: "/zoushi"});
      },
      xiaodugongying() {
        this.$router.push({path: "/xiaodu"});
      },
      qita() {
        this.$router.push({path: "/qita"});
      },
      shoushu() {
        this.$router.push({path: "/shoushu"});
      },
      mazui() {
        this.$router.push({path: "/mazui"});
      },
      zhenliao() {
        this.$router.push({path: "/zhenliao"});
      },
      yifenyide() {
        this.$router.push({path: "/yifeng"});
      },
      binganguanli() {
        this.$router.push({path: "/bingan"});
      },
      yuannneibuyu() {
        this.$router.push({path: "/xintiaotingzhi"});
      },
      geiyaocuowu() {
        this.$router.push({path: "/geiyaocuowu"});
      },
      jinsiyao() {
        this.$router.push({path: "/jinsiyaocuowu"});
      },
      yizhuchufang() {
        this.$router.push({path: "/yizhucuowu"});
      },
      yaowucunchu() {
        this.$router.push({path: "/yaowucunchu"});
      },
      ganranjuji() {
        this.$router.push({path: "/ganranjuji"});
      },
      zhiyebaolu() {
        this.$router.push({path: "/zhiyebaolu"});
      },
      yiliaofeiwu() {
        this.$router.push({path: "/yiliaofeiwu"});
      },
      yongxueanquan() {
        this.$router.push({path: "/useblood"});
      },
      shuxuebuliang() {
        this.$router.push({path: "/transferblood"});
      },
      jiancha() {
        this.$router.push({path: "/checkmeasure"});
      },
      jianyan() {
        this.$router.push({path: "/inspectionmeasure"});
      },
      bingli() {
        this.$router.push({path: "/bingli"});
      },
      gonggongyiwai() {
        this.$router.push({path: "/ggong"});
      },
      zhianshanghai() {
        this.$router.push({path: "/zhian"});
      },
      houqin() {
        this.$router.push({path: "/houqin"});
      },
      xinxi() {
        this.$router.push({path: "/xinxi"});
      },
      feiyong() {
        this.$router.push({path: "/feiyongxiangguan"});
      },
      chuangkou() {
        this.$router.push({path: "/chuangkoufuwu"});
      }


    }


  }

</script>

<style lang="scss" scoped>

  .quanback {
    width: 96%;
    margin-top: 1.5%;
    margin-left: 2%;
    margin-right: 2%;
  }

  .box {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    width: 100%;
  }

  .ti {
    margin-bottom: 40px;
    width: 15%;
    float: left;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
  }

  .nei {
    width: 84%;
    float: right;

    ::v-deep .el-card__body {
      padding: 20px 20px 20px 20px;
      text-align: center;
    }

    ::v-deep .el-card {
      margin-bottom: 16px;
    }

    ::v-deep .el-divider {
      margin-top: 8px;
      margin-bottom: 24px;
    }

    .shijiancard {
      height: 150px;
      border-radius: 10px;
      font-weight: bold;
      font-size: 21px;
    }

    .shijiancard:hover {
      border: #1E90FF 3px solid;
      transform: scale(1.05); //放大倍数
    }

  }


</style>
